<template>
    <!--搜索结果主页-->
    <view class="search-result-index-containter">
        <block>
            <block v-if="productList.length === 0">
                <view class="empty-container-search">
                    <image class="empty-icon_0" src="../../static/img/apollo/search_empty.png"></image>
                    <view class="empty-tips_0">没有找到要的宝贝</view>
                </view>
            </block>
            <block v-else>
                <!--搜索结果输入栏-->
                <view class="search-result-wrap">
                    <Goods v-for="item in productList" :key="item.productId" :item="item">
                    </Goods>
                </view>
            </block>
        </block>
        <view class="no_more" v-if="!hasMore">- 没有更多了 -</view>
        <shop-car />
    </view>
</template>

<script>
import Big from 'big.js';
import Goods from '../components/goods';
import { tagProduct } from '../../api/product.js';
import ShopCar from '../../components/ShopCar/ShopCar.vue';
import { showToast } from '../../utils/promise.js';

export default {
    data() {
        return {
            productList: [],
            historySearchTxt: '',
            total: 0, //数据总数
            current: 1, //当前页码
            pageSize: 20, //每一页的商品数量
            hasMore: true,
            tagIds: '',
        }
    },
    mounted() {
    },
    onLoad() {

    },
    components: {
        Goods,
        ShopCar
    },
    methods: {
        onLoad(params) {
            if (params.paramId) {
                // console.log(params);
                uni.showLoading();
                this.getProductByTag(params.paramId);
                this.tagIds = params.paramId;
                this.historySearchTxt = params.title;
                uni.setNavigationBarTitle({ title: params.title });
            }

        },
        getProductByTag(tagIds) {
            tagProduct({
                tag: tagIds,
                pageNo: this.current,
                pageSize: this.pageSize,
            }).then((res) => {
                // console.log(res)
                const {code, data, msg} = res
                if(code !== 200) {
                    showToast({
                        title: msg
                    })
                    return
                }
                data.records.forEach((i) => {
                    i.originalPrice = new Big(i.originalPrice).div(100);
                    i.currentPrice = new Big(i.currentPrice).div(100);
                })
                this.productList = data.records;
                this.total = data.total;
                this.hasMore = (this.current * this.pageSize) < data.total;
            }).catch((err) => {
                console.log(err)
            })
        },
        onClearSearchTxT() {
            wx.navigateBack({//返回上一页
                delta: 1
            })
        },
        //查询下一页的数据
        queryNextPageDetails() {
            if (!this.hasMore) {
                return;
            }
            let current = this.current;
            current++;
            tagProduct({
                tag: this.tagIds,
                pageNo: current,
                pageSize: this.pageSize,
            }).then((res) => {
                const {code, data, msg} = res
                if(code !== 200) {
                    showToast({
                        title: msg
                    })
                    return
                }
                data.records.forEach((i) => {
                    i.originalPrice = new Big(i.originalPrice).div(100);
                    i.currentPrice = new Big(i.currentPrice).div(100);
                })
                this.productList = data.records;
                this.hasMore = (this.current * this.pageSize) < data.total;
                this.current = current;
            }).catch((err) => {
                console.log(err)
            })
        },
        //上拉触底事件,加载下一页数据
        onReachBottom: function () {
            this.queryNextPageDetails();
        }
    }
}
</script>

<style scoped>
.search-result-index-containter {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 10rpx;
}

.search-result-wrap {
    width: 100%;
}

.empty-icon_0 {
    width: 414rpx;
    height: 188rpx;
    margin-left: calc((100% - 414rpx) * 0.5);
    padding-top: 50rpx;
}

.empty-tips_0 {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #666666;
    line-height: 43rpx;
    margin-top: 50rpx;
}

.empty-container-search {
    background-color: #fff;
    width: 100%;
    height: 400rpx;
    margin-bottom: 20rpx;
}

.no_more {
    text-align: center;
    padding: 20rpx 0;
}
</style>